<!-- #section:basics/content.breadcrumbs -->
<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }

    </script>

    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">权限管理</a>
        </li>

        <li>
            <a href="#">角色管理</a>
        </li>

    </ul>
    <!-- /.breadcrumb -->

</div>

<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">
    <!-- /section:settings.box -->
    <div class="page-content-area">
        <div class="page-header">
            <button class="btn btn-sm btn-success btn-info" id="id-btn-dialog2" render-dialog="addRole" title="新增角色">
                新增角色
            </button>

            <!--隐藏层-->
            <div id="dialog-addRole" class="hide dialog-add">
                <table>
                     <!--<tr ng-show="message">-->
                                <!--<td colspan="2">-->
                                    <!--<span class="red">{{message}}</span>-->
                                <!--</td>-->
                            <!--</tr>-->
                    <tr>
                        <td>
                            名称
                        </td>
                        <td>
                            <input type="text" ng-model="role.name">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            角色描述
                        </td>
                        <td>
                            <textarea ng-model="role.description" style="width:465px;"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- #dialog-message -->

            <!--隐藏层-->
            <div id="dialog-addRolePrivilege" class="hide">
                <div class="col-sm-6 col-sm-100">
                    <div class="widget-box widget-color-blue2">
                        权限选择
                        <div class="widget-body">
                            <div class="widget-main padding-8">
                                <!--<div id="tree1" class="tree"></div>-->
                                  <div class="select_content" style="position:static;display: block;border:none">
                                            <ul id="myTreeSelector" class="treetable dumpl_select">
                                                <li ng-repeat="p in privileges" data-id={{p.id}} data-tt-id="{{p.ttId}}"
                                                    data-tt-parent-id="{{p.pid}}" on-tree-select>
                                                    <div><span>{{p.name}}</span></div>
                                                </li>
                                            </ul>
                                        </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            <!-- #dialog-message -->


        </div>
        <!-- /.page-header -->

        <div class="row">

            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                            <span class="red">{{message}}</span>
                <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="center">
                            <label class="position-relative">
                                <input type="checkbox" class="ace"/>
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th>序号</th>
                        <th>角色名称</th>
                        <th class="hidden-480">角色描述</th>

                        <th>
                            <i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>
                            创建日期
                        </th>
                        <th>授权</th>
                        <th>删除</th>
                        <th>修改</th>
                        <th>冻结</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr ng-repeat="role in roles" on-finish-render-filters data-id="{{role.id}}">
                    <td class="center">
                    <label class="position-relative">
                    <input type="checkbox" class="ace"/>
                    <span class="lbl"></span>
                    </label>
                    </td>

                    <td>
                    {{$index+1}}
                    </td>
                    <td>{{role.name}}</td>
                    <td class="hidden-480">{{role.description}}</td>
                    <td>{{role.datetime}}</td>
                    <td class="hidden-480">
                    <button class="btn btn-warning btn-xs privilege" data-id="{{role.id}}" data-dialog="addRolePrivilege" title="角色授权">
                    <i class="ace-icon fa fa-wrench  bigger-110 icon-only"></i>
                    </button>
                    </td>
                    <td>

                    <button class="btn btn-warning btn-xs delete">
                    <i class="ace-icon glyphicon glyphicon-trash"></i>
                    </button>

                    </td>
                    <td>
                    <div class="hidden-sm hidden-xs btn-group">
                    <!--<button class="btn btn-xs btn-purple update" data-id="{{role.id}}"  data-dialog="addRole" title="修改角色信息">-->
                    <button class="btn btn-xs btn-purple" data-id="{{role.id}}" data-toggle="modal" data-target="#updateRole" ng-model="role" edit>
                        <i class="ace-icon fa fa-pencil align-top bigger-125"></i>
                    修改
                    </button>
                    </div>

                    <div class="hidden-md hidden-lg">
                    <div class="inline position-relative">
                    <button class="btn btn-minier btn-purple dropdown-toggle" data-toggle="dropdown"
                    data-position="auto">
                    <i class="ace-icon fa fa-pencil align-top bigger-125"></i>
                    </button>
                    </div>
                    </div>
                    </td>
                    <td class="hidden-480">
                    <label>
                    <input name="switch-field-1" class="ace ace-switch ace-switch-4" type="checkbox">
                    <span class="lbl"></span>
                    </label>
                    </td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.page-content-area -->
</div><!-- /.page-content -->


<!-- 模态框（Modal） -->
<div class="modal fade" id="updateRole" tabindex="-1" role="dialog"
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
               修改角色信息
            </h4>
         </div>
         <div class="modal-body dialog-add">
              <table>
                    <tr>
                        <td>
                            名称
                        </td>
                        <td>
                            <input type="text" ng-model="role.name">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            角色描述
                        </td>
                        <td>
                            <textarea ng-model="role.description" style="width:465px;"></textarea>
                        </td>
                    </tr>
                </table>

         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default updateClose_btn"
               data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary" ng-model="role" update>
               提交更改
            </button>
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<script type="text/javascript">

    jQuery(function ($) {
        /**
         var tableTools = new $.fn.dataTable.TableTools( oTable1, {
					"sSwfPath": "../../copy_csv_xls_pdf.swf",
			        "buttons": [
			            "copy",
			            "csv",
			            "xls",
						"pdf",
			            "print"
			        ]
			    } );
         $( tableTools.fnContainer() ).insertBefore('#sample-table-1');
         */

    })
</script>